<template>
    <div class="main">
        <div class="cropper_div">
            <div class="cropper_box">
                <vue-cropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"
                    :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox"
                    :original="option.original" :autoCrop="option.autoCrop" :fixed="option.fixed"
                    :fixedNumber="option.fixedNumber" :centerBox="option.centerBox" :infoTrue="option.infoTrue"
                    :fixedBox="option.fixedBox"></vue-cropper>
            </div>
        </div>
        <div class="cropper_button">
            <div class="cropper_button_box">
                <el-button type="danger" plain>取消</el-button>
                <el-button type="primary" plain>确定</el-button>
            </div>

        </div>
    </div>
</template>
  
<script>
import { VueCropper } from 'vue-cropper'

export default {
    // 组件名称
    name: 'vuecropperdemo',
    // 组件参数 接收来自父组件的数据
    props: {
        imageUrl: String,
    },
    // 局部注册的组件
    components: { VueCropper },
    // 组件状态值
    data() {
        return {
            option: {
                img: '', // 裁剪图片的地址
                info: true, // 裁剪框的大小信息
                outputSize: 1, // 裁剪生成图片的质量
                outputType: 'jpeg', // 裁剪生成图片的格式
                canScale: false, // 图片是否允许滚轮缩放
                autoCrop: true, // 是否默认生成截图框
                // fixedBox: true, 
                fixed: false, // 是否开启截图框宽高固定比例
                fixedNumber: [1, 1], // 截图框的宽高比例
                full: false, // 是否输出原图比例的截图
                canMoveBox: true, // 截图框能否拖动
                original: false, // 上传图片按照原始比例渲染
                centerBox: false, // 截图框是否被限制在图片里面
                infoTrue: true,// true 为展示真实输出图片宽高 false 展示看到的截图框宽高
                size: null,
                canMove: null,
                fixedBox: false,// 固定截图框大小 不允许改变

            },
        }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {

    },
    // 组件方法
    methods: {},
    // 以下是生命周期钩子   注：没用到的钩子请自行删除
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    beforeCreate() {
    },
    /**
    * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
    */
    created() {
        
    },
    /**
    * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    beforeMount() {
        console.log(this.imageUrl);
        // this.option.img = this.imageUrl;
    },
    /**
    * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
    * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
    */
    mounted() {
    },
    /**
    * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
    * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
    */
    beforeUpdate() {
    },
    /**
    * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
    */
    updated() {
    },
    /**
    * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
    */
    activated() {
    },
    /**
    * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
    */
    deactivated() {
    },
    /**
    * 实例销毁之前调用。在这一步，实例仍然完全可用。
    */
    beforeDestroy() {
    },
    /**
    * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
    * 所有的事件监听器会被移除，所有的子实例也会被销毁。
    */
    destroyed() {
    }
}
</script> 
  
  
<style scoped >
.main {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.main .cropper_div {
    height: 30.2vh;
    width: 100%;
    display: flex;
    justify-content: center;
}

.main .cropper_div .cropper_box {
    height: 30vh;
    width: 30vh;
}

.main .cropper_button {
    position: relative;
    width: 100%;
    height: 4vh;
    display: flex;
    justify-content: center;
}
.main .cropper_button .cropper_button_box{
    position: relative;
    width: 30vh;
    height: 4vh;
    display: flex;
    justify-content: space-between;

}
</style>
  